<template>
  <div class="chart-section">
    <div class="chart-container">
      <div class="text-#4D4D4D mb-20px">{{ barChartTitle || '报修与报废' }}</div>
      <Echart :options="barChartOptions" :height="parseInt(getViewportPx(480, true))" />
    </div>
    <div class="chart-container">
      <div class="text-#4D4D4D mb-20px">资产</div>
      <Echart :options="pieChartOptions" :height="parseInt(getViewportPx(460, true))" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useBarOptions } from '@/hooks/chart/useBarOptions'
import { usePieOptions } from '@/hooks/chart/usePieOptions'
import { getViewportPx } from '@/utils/formatter'

const props = defineProps<{
  barChartRawData: any[]
  pieChartData: any[]
  barSeriesMap?: string[]
  barChartTitle?: string
  pieChartTitle?: string
  isFixedAssets?: boolean
}>()

// 统一使用的状态映射
const statusMap = {
  0: '入库',
  2: '领用',
  1: '归还',
  3: '报修',
  4: '报废',
  6: '补货',
  7: '预警'
}

// 处理柱状图数据
const processBarChartData = computed(() => {
  if (!props.barChartRawData || props.barChartRawData.length === 0) {
    return []
  }

  const year = new Date().getFullYear().toString()

  // 初始化数据
  const statusData: Record<string, number[]> = {}
  Object.values(statusMap).forEach((status) => {
    if (props.barSeriesMap?.includes(status)) {
      statusData[status] = Array(12).fill(0)
    }
  })

  // 填充数据
  props.barChartRawData.forEach((item: any) => {
    // 提取月份部分，例如 "202501" -> "01"
    const monthStr = item.month.toString().slice(-2)
    const monthIndex = parseInt(monthStr) - 1

    item.statusCounts.forEach((statusCount: any) => {
      const status = statusMap[statusCount.flowStatus]
      if (props.barSeriesMap?.includes(status)) {
        statusData[status][monthIndex] = statusCount.count
      }
    })
  })

  // 转换为图表数据
  return Object.keys(statusData).map((status) => ({
    name: status,
    data: statusData[status]
  }))
})

// 柱状图配置
const barChartOptions = computed(() => {
  return useBarOptions([], {
    title: {
      left: 'center',
      text: '按月份统计'
    },
    grid: {
      right: 0
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    },
    yAxis: {
      type: 'value'
    },
    series: processBarChartData.value.map((series) => ({
      name: series.name,
      data: series.data
    }))
  }).baseOptions
})

// 处理饼图数据
const processPieChartData = computed(() => {
  if (!props.pieChartData || props.pieChartData.length === 0) {
    return []
  }

  return props.pieChartData
    .map((item: any) => ({
      name: statusMap[item.flowStatus],
      value: item.count
    }))
    .filter((item: any) => item.name) // 过滤掉找不到映射的项
})

// 饼图配置
const pieChartOptions = computed(() => {
  return usePieOptions(processPieChartData.value, {
    title: {
      left: 'center',
      text: '资产报表统计'
    },
    series: [
      {
        radius: ['45%', '72%'],
        // label: {
        //   position: 'outside',
        //   formatter: '{b}：{d}%',
        //   color: 'inherit'
        // }
      }
    ]
  }).baseOptions
})
</script>

<style scoped lang="scss">
.chart-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.chart-container {
  padding: 14px 18px;
  font-weight: 500;
  background: #fff;
  border-radius: 8px;
}
</style>
